<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <title>报名</title>
    <style>
        body{background: #EFEFF4}
        div.comment-list-row .cont{padding-top: 0;}
        .ipt-txt label{font-size: 14px; font-family: 'Microsoft Yahei', Helvetica, sans-serif;}
        .mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio]{padding: 4px;}
        .mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{font-size: 20px;}
    </style>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/mui.dtpicker.css" />
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/mui.picker.css" />
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/plugins/flavr/css/flavr.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/appLogin.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/app/plugins/dialog/css/dialog.css" />
</head>
<body>
<!--apply-wrapper-->
<div class="apply-wrapper" data-MH="true" id="content-detail">
    <script type="text/html" id="tplSign">
    <div class="white">
        <section class="title">
            <h3>{{title}}</h3>
        </section>
        <section class="thumb">
            <img src="{{theme_pic}}" alt="" />
        </section>
    </div>
    <!--content-tab-wrap-->
    <section class="content-tab-wrap">
        <ul class="list" id="tabWrap">
            <li class="active" data-target="#activeIntro"><a>活动介绍</a></li>
            <li data-target="#activeInteract"><a>互动直播</a></li>
        </ul>
    </section>
    <!--/content-tab-wrap-->
    <!--content-panel 活动介绍-->
    <section class="content-panel showIn" id="activeIntro">
        <table class="act-list">
            <tr>
                <th>主办方</th>
                <td>{{organizer}}</td>
            </tr>
            <tr>
                <th>报名截止</th>
                <td>{{dataFormat(end_time,'yyyy-MM-dd hh:mm')}}</td>
            </tr>
            <tr>
                <th>活动时间</th>
                <td>{{dataFormat(act_start_time,'yyyy-MM-dd hh:mm')}}至{{dataFormat(act_end_time,'yyyy-MM-dd hh:mm')}}</td>
            </tr>
            <tr>
                <th>报名费用</th>
                <td>{{if money}}{{dealAmount money}}{{else}}0.00{{/if}}元</td>
            </tr>
        </table>
        <!--table-row-->
        <div class="table-row address" data-url="{{map_url}}">
            <dl class="tab">
                <dt>活动地址</dt>
                <dd>{{address}}</dd>
            </dl>
        </div>
        <!--/table-row-->
        <!--cont-box-->
        <div class="cont-box">
            <div class="tit">
                <h2>活动详情</h2>
            </div>
            <div class="cont">
                {{#content}}
            </div>
        </div>
        <!--/cont-box-->
    </section>
    <!--/content-panel-->

    <!--content-panel 互动直播-->
    <section class="content-panel" id="activeInteract">
        <!--table-row-->
        <div class="table-row arrow-right" id="live" data-url="{{live_url}}">
            <dl class="tab">
                <dt>视频直播</dt>
                <dd>{{if live_url}}点击进入直播间{{else}}暂无{{/if}}</dd>
                <dd class="txtR">进入直播间</dd>
            </dl>
        </div>
        <!--/table-row-->
        <!--table-row-->
        <div class="table-row arrow-right">
            <dl class="tab">
                <dt>报名用户</dt>
                <dd>{{overplus_num}}人</dd>
                <dd class="txtR" id="viewAllUser">查看全部</dd>
            </dl>
            <ul class="head">
                {{if overplus_num > 6}}
                    {{each parseFor(6) as value i}}
                        <li><a><img src="<%=basePath%>/app/images/active/head_0{{value.id}}.png" alt="" /></a></li>
                    {{/each}}
                {{else}}
                    {{each parseFor(overplus_num) as value i}}
                        <li><a><img src="<%=basePath%>/app/images/active/head_0{{value.id}}.png" alt="" /></a></li>
                    {{/each}}
                {{/if}}
            </ul>
        </div>
        <!--/table-row-->
        <div class="comment-title">
            <h2>热门留言</h2>
        </div>
        <!--comment-list-->
        <div class="comment-list apply-comment" id="commentList">
            <div class="content" id="commentWarp">
                {{include 'tplComment' comment}}
            </div>
            <div class="more-box">
                <a href="javascript:;" id="loadCommentMore">加载更多</a>
            </div>
        </div>
        <!--/comment-list-->
    </section>
    <!--/content-panel-->
    </script>
</div>
<!--/apply-wrapper-->

<script type="text/html" id="tplComment">
    {{each list as value i}}
    <div class="comment-list-row">
        <div class="item left">
            <div class="head" style="background-image: url('<%=basePath%>/app/images/defaultHead.png')"></div>
        </div>
        <!--right-->
        <div class="item right">
            <div class="top-info">
                <span class="time">{{formatTime value.create_time}}</span>
                <h3><span class="username">{{value.name}}</span></h3>
            </div>
            <div class="cont">
                <p>{{value.comment}}</p>
            </div>
            {{if value.reply}}
            <div class="reply">
                <p>小编：{{value.reply}}</p>
            </div>
            {{/if}}
        </div>
        <!--/right-->
    </div>
    {{/each}}
</script>

<!--报名模板-->
<script type="text/html" id="tplApplyForm">
    <form method="post" class="apply-form">
        <dl>
            <dt><span style="color: red">*</span> 姓名</dt>
            <dd>
                <div class="ipt-txt">
                    <input type="text" name="name" id="name" placeholder="请输入姓名" />
                </div>
            </dd>
        </dl>
        {{each modelList as value i}}
        <dl class="mui-input-row" name="attribute{{i}}" data-type="{{value.type}}" data-need="{{value.is_need}}">
            <dt>{{if value.is_need == 1}}<span style="color: red">*</span> {{/if}}{{value.title}} {{if value.type==2}}(单选){{/if}}{{if value.type==3}}(多选){{/if}}</dt>
            <dd>
                <div class="ipt-txt">
                    {{if value.type==1}}
                    <input type="text" class="mui-input-clear" placeholder="请填写{{value.title}}" name="attr">
                    {{/if}}
                    {{if value.type==4}}
                    <input type="text" class="mui-input-clear time" placeholder="请选择{{value.title}}" name="attr" readonly>
                    {{/if}}
                    {{if value.type==2}}
                    {{if value.option1}}
                    <div class="mui-input-row mui-radio mui-left">
                        <label>{{value.option1}}</label>
                        <input name="attr" type="radio" value="{{value.option1}}" />
                    </div>
                    {{/if}}
                    {{if value.option2}}
                    <div class="mui-input-row mui-radio mui-left">
                        <label>{{value.option2}}</label>
                        <input name="attr" type="radio" value="{{value.option2}}" />
                    </div>
                    {{/if}}
                    {{if value.option3}}
                    <div class="mui-input-row mui-radio mui-left">
                        <label>{{value.option3}}</label>
                        <input name="attr" type="radio" value="{{value.option3}}" />
                    </div>
                    {{/if}}
                    {{if value.option4}}
                    <div class="mui-input-row mui-radio mui-left">
                        <label>{{value.option4}}</label>
                        <input name="attr" type="radio" value="{{value.option4}}" />
                    </div>
                    {{/if}}
                    {{if value.option5}}
                    <div class="mui-input-row mui-radio mui-left">
                        <label>{{value.option5}}</label>
                        <input name="attr" type="radio" value="{{value.option5}}" />
                    </div>
                    {{/if}}
                    {{/if}}
                    {{if value.type==3}}
                    {{if value.option1}}
                    <div class="mui-input-row mui-checkbox mui-left">
                        <label>{{value.option1}}</label>
                        <input name="attr" type="checkbox" value="{{value.option1}}" />
                    </div>
                    {{/if}}
                    {{if value.option2}}
                    <div class="mui-input-row mui-checkbox mui-left">
                        <label>{{value.option2}}</label>
                        <input name="attr" type="checkbox" value="{{value.option2}}" />
                    </div>
                    {{/if}}
                    {{if value.option3}}
                    <div class="mui-input-row mui-checkbox mui-left">
                        <label>{{value.option3}}</label>
                        <input name="attr" type="checkbox" value="{{value.option3}}" />
                    </div>
                    {{/if}}
                    {{if value.option4}}
                    <div class="mui-input-row mui-checkbox mui-left">
                        <label>{{value.option4}}</label>
                        <input name="attr" type="checkbox" value="{{value.option4}}" />
                    </div>
                    {{/if}}
                    {{if value.option5}}
                    <div class="mui-input-row mui-checkbox mui-left">
                        <label>{{value.option5}}</label>
                        <input name="attr" type="checkbox" value="{{value.option5}}" />
                    </div>
                    {{/if}}
                    {{/if}}
                </div>
            </dd>
        </dl>
        {{/each}}
        <div class="error-box"></div>
        <div class="button-box">
            <button type="button" class="btn-submit">保存并报名</button>
        </div>
        <div class="hint-box">
            <p>提示：通过报名申请的，管理员将通过消息形式发送电子凭证，请在个人中心消息中查看哦~</p>
        </div>
    </form>
</script>
<!--留言模板-->
<script type="text/html" id="tplCommentForm">
    <form action="#" method="post" class="apply-form">
        <dl>
            <dd>
                <div class="ipt-txt">
                    <textarea name="message" id="comment" placeholder="请输入留言信息"></textarea>
                </div>
            </dd>
        </dl>
        <div class="error-box"></div>
        <div class="button-box">
            <button type="button" class="btn-submit">提交</button>
        </div>
    </form>
</script>
<!--apply-fixed-->
<div class="apply-fixed">
    <ul class="list">
        <li class="apply-now" id="btnApplyNow">立即报名</li>
        <li id="btnMessage">留言</li>
        <li id="signQuery">报名查询</li>
    </ul>
</div>
<!--/apply-fixed-->
<script type="text/javascript" src="<%=basePath%>/app/js/mui.picker.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/js/mui.dtpicker.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/js/jquery.extend.1.0.1.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/plugins/flavr/js/myFlavr.js"></script>
<script type="text/javascript" src="<%=basePath%>/app/plugins/dialog/js/dialog.js"></script>
<script>
    var _offset = 1, _total = 0;

    function TabClass(){
        var _wrapList = $('ul#tabWrap li'), _navActive = 'active', _contentPanel = $('.content-panel');

        _wrapList.on('tap', function(){
            var _target = $($(this).data('target'));
            if('undefined' !== typeof _target.get(0)){
                _wrapList.removeClass(_navActive);
                $(this).addClass(_navActive);

                _contentPanel.hide();
                _target.show();
            }
        });
    }
    var _dialog;
    //留言
    var _commentDialog, _commentParam = {
        wrapper: "p",
        ignore:".ignore",
        rules : {
            message : {required : true }
        },
        messages : {
            message : {required : '请输入评论信息' }
        }
    };

    $(function(){
        loadData();
    });
    
    function loadData() {
        $.ajax({
            url: _basePath + "app/act/detail",
            data: {id: ${id} },
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0){
                    var _html = template('tplSign', data.resultList);
                    shareWx(window.location.href,data.resultList.theme_pic,data.resultList.title,data.resultList.title);
                    $("#content-detail").append(_html);
                    _total = data.resultList.comment.totalPage;
                    loadEvent(data.resultList);
                }else{
                    mui.toast("获取热点详情出错");
                }
            }
        });
    }
    
    function loadEvent(data) {

        TabClass();

        //创建弹框 报名
        _dialog = $.definedDialog({
            title : '报名表',
            content : template('tplApplyForm', data),
            closeCallback : function(ele){
                var _form = ele.find('form.apply-form');
                _form.get(0).reset();
                _form.find('.ipt-txt').removeClass('error');
            },
            loadHtml : function(ele){
                ele.find("input.time").each(function(i,time){
                    var dtPicker = new mui.DtPicker({"type":"date"});
                    time.addEventListener('tap', function (event) {
                        dtPicker.show(function (selectItems) {
                            time.value=selectItems;
                        })
                    })
                }, false);

                //提交 保存
                ele.on('tap', '.btn-submit', function(){
                    if(validateForm()){
                        var data = { id:${id}, name:$("#name").val(), attr:JSON.stringify(getAttr()) };
                        checkLogin(function () {
                            signUpSubmit(data);
                        },function () {
                            initLogin(function (dialog) {
                                dialog.hideDialog();
                                signUpSubmit(data);
                            }, {onLoad: "signUpSubmit",data: data})
                        });
                    }
                });
            }
        });

        //创建弹框 报名
        _commentDialog = $.definedDialog({
            title : '留言信息',
            content : template('tplCommentForm', {}),
            closeCallback : function(ele){
                var _form = ele.find('form.apply-form');
                _form.get(0).reset();
                _form.find('.ipt-txt').removeClass('error');
            },
            loadHtml : function(ele){
                var _form = ele.find('form.apply-form');
                _commentParam['errorLabelContainer'] = _form.find('.error-box');
                _form.validate(_commentParam);
                //提交 保存
                ele.on('tap', '.btn-submit', function(){
                    if(_form.valid()){
                        commentMake($("#comment").val());
                    }
                });
            }
        });
        
        function commentMake(comment) {
            $.ajax({
                url: _basePath + "/app/act/commentMake",
                data: {
                    comment: comment,
                    interaction_id: ${id}
                },
                dataType: 'json',
                success: function (data) {
                    if(typeof data.resCode != undefined && data.resCode == 0){
                        mui.toast("评论成功");
                        $("#commentWarp").html("");
                        loadComment(0);
                    }else{
                        mui.toast(data['message']);
                    }
                    _commentDialog.closeDialog();
                }
            });
        }

        //加载更多评论列表
        $(document).on('tap', '#loadCommentMore', function(){
            if(_offset < _total){
                loadComment(_offset);
            }else{
                mui.toast("已经没有数据了");
            }
        });

        //报名用户 查看全部
        mui('body').on('tap', 'dd#viewAllUser', function(){
            mui.openWindow({
                url : _basePath + 'app/page?pv=act_sign_user&id=${id}'
            });
        });

        //报名
        mui('body').on('tap', 'li#btnApplyNow', function(){
            _dialog.showDialog();
        });

        //留言
        mui('body').on('tap', 'li#btnMessage', function(){
            checkLogin(function () {
                _commentDialog.showDialog();
            },function () {
                initLogin(function (dialog) {
                    dialog.hideDialog();
                    _commentDialog.showDialog();
                },{onLoad: "openCommentDialog"})
            });
        });
        
        //查询
        mui('body').on("tap", "#signQuery", function () {
            checkLogin(function () {
                userQuery();
            },function () {
                initLogin(function () {
                    userQuery();
                })
            });
        });

        function userQuery() {
            $.ajax({
                url: _basePath + "app/act/checkSignUpUser",
                data: {id: '${id}'},
                dataType: 'json',
                success: function (data) {
                    if(typeof data != undefined && data.resCode == 0){
                        mui.openWindow({
                            url: _basePath + "app/page?pv=act_sign_notice&id=${id}"
                        })
                    }else{
                        mui.toast(data['message']);
                    }
                }
            })
        }

        //位置跳转
        mui("body").on('tap', '.address', function () {
            var url = $(this).data("url");
            if(!isEmpty(url)){
                mui.openWindow({
                    url: url
                })
            }
        });

        //直播
        mui("body").on('tap', '#live', function () {
            var url = $(this).data("url");
            if(!isEmpty(url)){
                mui.openWindow({
                    url: url
                })
            }
        });
    }

    function openCommentDialog() {
        setTimeout(function () {
            _commentDialog.showDialog();
        }, 100);
    }

    function loadComment(offset) {
        $.ajax({
            url: _basePath + "app/act/commentList",
            data: {
                interaction_id: ${id},
                curPage: offset + 1
            },
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0){
                    var _html = template('tplComment', data.resultList);
                    $("#commentWarp").append(_html);
                    if(offset != 0){
                        _offset++;
                    }
                    _total = data.resultList.totalPage;
                }
            }
        })
    }
    
    function signUpSubmit(data) {
        $(".btn-submit").attr("disabled",true);
        $.ajax({
            url: _basePath + "app/act/signUpOrder",
            dataType: "json",
            type: "post",
            data: data,
            success: function (data) {
                if (typeof data != undefined && data.resCode == 0) {
                    if(!isEmpty(data['resultList'])){
                        mui.openWindow({
                            url: _basePath + data.resultList
                        })
                    }else{
                        subSignUp();
                    }
                } else{
                    mui.toast(data.message);
                    $(".btn-submit").attr("disabled",false);
                }
            }
        })
    }


    function validateForm(){
        if(isEmpty($('#name').val())){
            mui.toast("姓名不能为空");
            return false;
        }
        var attr = '',count = 0;
        $("dl[name^='attribute']").each(function(i){
            var type = $(this).data("type"),need = $(this).data("need");
            if(need === 1){
                count++;
                if(type === 1 || type === 4){
                    attr = $(this).find("input[name='attr']").val();
                }else if(type === 2){
                    attr = $(this).find("input[name='attr']:checked").val();
                }else{
                    $(this).find("input[name='attr']:checked").each(function (i) {
                        attr += $(this).val() + ",";
                    });
                    attr = attr.substring(0,attr.length-1);
                }
            }
        });
        if(count > 0 && isEmpty(attr)){
            mui.toast("请将带*号的信息填写完整");
            return false;
        }
        return true;
    }

    function getAttr(){
        var _attr = [];
        $("dl[name^='attribute']").each(function(i){
            var type = $(this).data("type");
            var attr = '';
            if(type === 1 || type === 4){
                attr = $(this).find("input[name='attr']").val();
            }else if(type === 2){
                var value = $(this).find("input[name='attr']:checked").val();
                if(!isEmpty(value)){
                    attr = value;
                }
            }else{
                $(this).find("input[name='attr']:checked").each(function (i) {
                    attr += $(this).val() + ",";
                });
                attr = attr.substring(0,attr.length-1);
            }
            _attr[i] = attr;
        });
        return _attr;
    }

    function subSignUp(){
        $.ajax({
            url: _basePath + "app/act/subSignUp",
            dataType: "json",
            type:"post",
            data:{
                id:${id}
            },
            success: function (data) {
                if (typeof data != undefined && data.resCode == 0) {
                    mui.toast("报名成功");
                    setTimeout(function () {
                        window.location.href = updateUrl(window.location.href);
                    },1000)
                } else {
                    mui.toast(data.message);
                    $(".btn-submit").attr("disabled",false);
                }
            }
        })
    }

</script>
